<template>
    <div class="login-container">
        <div class="logo-title">
            <img src="@/assets/image/logo.png"/>
            <p>医院数据质量分析平台</p>
        </div>
        <div class="center-content">
            <img class="login-left" src="@/assets/image/login-left.png"/>
            <el-form ref="loginForm"
                     :model="loginForm"
                     :rules="loginRules"
                     class="login-form"
                     auto-complete="on"
                     label-position="top">
                <h3 class="title">• 平台登录 •</h3>
                <el-form-item label="用户名" prop="username">
                    <el-input
                        v-model="loginForm.username"
                        name="username"
                        type="text"
                        auto-complete="on"
                        @keyup.enter.native="handleLogin"
                        placeholder="请输入用户名"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        type="password"
                        v-model="loginForm.password"
                        name="password"
                        auto-complete="on"
                        show-password
                        placeholder="请输入密码"
                        @keyup.enter.native="handleLogin"/>
                </el-form-item>
                <el-form-item label="" class="btn">
                    <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
                        登录
                    </el-button>
                </el-form-item>
                <div class="tips-box" v-if="!cloudMode">
                    <p v-if="!isValid">软件还未授权，请联系售后人员进行授权</p>
                    <p v-else-if="isShow">软件使用时间还剩余 <span>{{timeLeft}}</span> 天，到期后将不能使用</p>
                </div>
                <p class="viewer-tips">建议使用谷歌Chrome、360浏览器访问系统，以获得更佳的用户体验！</p>
            </el-form>
        </div>
        <div class="copy-right" :class="{'is-short': isShort}">
            <img src="@/assets/image/cloud.png"/>
            <p>康卫通信息科技成都有限公司版权所有</p>
        </div>
    </div>
</template>

<script>
    import {getSystemInfo} from '@/api/global/index'
    import Cookie from 'js-cookie'

    export default {
        name: 'Login',
        data () {
            return {
                // 登录表单
                loginForm: {
                    username: '',
                    password: ''
                },
                // 登录规则
                loginRules: {
                    username: [{required: true, message: '用户名不能为空', trigger: ['blur', 'change']}],
                    password: [{required: true, message: '密码不能为空', trigger: ['blur', 'change']}]
                },
                // 是否加载
                loading: false,
                // 重定向
                redirect: undefined,
                // 路由
                routes: [],
                // 是否授权
                isValid: true,
                // 是否小于7天显示
                isShow: false,
                // 剩余天数
                timeLeft: 0,
                // 是小屏，高度小于860
                isShort: false,
                // 是否是云端部署，true云端，false本地100vh - 190px
                cloudMode: true
            }
        },
        watch: {
            $route: {
                /**
                 * 检测路由
                 */
                handler: function (route) {
                    this.redirect = route.query && route.query.redirect
                },
                immediate: true
            }
        },
        created () {
            if (Cookie.get('timeOut')) {
                this.$message.warning('登录超时或没有权限访问，请重新登录!')
                Cookie.remove('timeOut')
            }
            this.getInfo()
            this.isShort = document.body.clientHeight < 860
            window.onresize = () => {
                this.isShort = document.body.clientHeight < 860
            }
        },
        methods: {
            /**
             * 获取授权版本信息
             */
            getInfo () {
                getSystemInfo().then(res => {
                    if (res.code.toString() === '200') {
                        this.isValid = res.data.isValid
                        let authTime = new Date(res.data.expriedTime).getTime()
                        let now = new Date().getTime()
                        this.isShow = authTime - now < 30 * 86400000
                        if (!res.data.cloudMode) {
                            this.timeLeft = Math.ceil((authTime - now) / 86400000)
                            Cookie.set('timeLeft', this.timeLeft)
                        }
                        this.cloudMode = res.data.cloudMode
                        localStorage.setItem('cloudMode', res.data.cloudMode)
                    }
                })
            },
            /**
             * 登录
             */
            handleLogin () {
                this.$refs.loginForm.validate(valid => {
                    this.loading = true
                    if (valid && this.isValid) {
                        this.$store.dispatch('user/login', this.loginForm).then((res) => {
                            this.loading = false
                            if (res.code.toString() === '200') {
                                this.$router.push({path: '/selectSystem'})
                            } else {
                                this.$message.error(res.message)
                            }
                        }).catch(err => {
                            this.loading = false
                            this.$message.error(err.message)
                        })
                    } else {
                        this.loading = false
                        return false
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .login-container {
        height: 100%;
        position: relative;
        background: #EAEEF3;
        .logo-title {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-top: 10px;
            margin-left: 355/1920*100%;
            margin-bottom: 120px;
            img {
                display: block;
                width: 180px;
            }
            p {
                line-height: 34px;
                font-size: 28px;
                padding-left: 16px;
                border-left: 1px solid #d0d0d0;
                margin: 0 0 0 16px;
            }
        }
        .center-content {
            display: flex;
            justify-content: center;
            align-items: center;
            .login-left {
                display: block;
                width: 487px;
                margin-right: 132px;
            }
            .login-form {
                width: 460px;
                height: 500px;
                padding: 30px;
                box-sizing: border-box;
                margin: 0;
                box-shadow:0 0 18px 0 rgba(0, 0, 0, 0.31);
                border-radius: 4px;
                background: #fff;
                position: relative;
                .title {
                    text-align: center;
                    color: #51586a;
                    margin-bottom: 53px;
                    font-size:28px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight:600;
                    color:rgba(14,30,45,1);
                    line-height:40px;
                }
                /deep/.el-form-item {
                    width: 400px;
                    margin-bottom: 22px;
                    .el-form-item__label {
                        padding-bottom: 0;
                    }
                    .el-input {
                        width: 400px;
                    }
                    &.btn {
                        display: flex;
                        justify-content: flex-end;
                        padding-top: 30px;
                        margin-bottom: 40px;
                        .el-button {
                            width: 400px!important;
                            background: #409EFF;
                        }
                    }
                }
                .tips-box {
                    p {
                        margin: 0;
                        span {
                            font-size: 20px;
                            font-weight: 600;
                            color: #e21f06;
                        }
                    }
                }
                .viewer-tips {
                    position: absolute;
                    margin: 0;
                    bottom: -28px;
                    left: 12px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(125,130,135,1);
                    line-height: 18px;
                }
            }
        }
        .copy-right {
            position: absolute;
            bottom: 0;
            width: 100%;
            img {
                display: block;
                width: 1600/1920*100%;
                margin: 0 auto;
            }
            p {
                position: absolute;
                width: 100%;
                margin: 0;
                bottom: 10px;
                text-align: center;
                font-size: 14px;
                color: #7D8287;
                line-height: 18px;
            }
            &.is-short {
                position: relative;
                bottom: 0;
                margin-top: 42px;
            }
        }
    }
</style>
